﻿<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="Notice.aspx.cs" Inherits="CRMWeb.Pages.Admin.Notice" %>

<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml">
<head id="Head1" runat="server">
    <title></title>
    <link rel="stylesheet" type="text/css" href="/EasyUI/Themes/default/easyui.css" />
    <link rel="stylesheet" type="text/css" href="/EasyUI/Themes/icon.css" />
    <link rel="stylesheet" type="text/css" href="/Css/CrmStyle.css" />
    <script type="text/javascript" src="/Scripts/jquery-1.8.0.min.js"></script>
    <script type="text/javascript" src="/EasyUI/jquery.easyui.min.js"></script>

    <script src="../../tiny_mce/tiny_mce.js"></script>

    
    <link href="../../Css/tooltip.css" rel="stylesheet" />
    <script src="../../Scripts/tooltip.js"></script>
</head>
<body>
    <form id="form1" runat="server">
        <div data-options="region:'center'" style="height: auto;">
            <table cellspacing="0" class="history_table" cellpadding="0" border="0" >
                <tr>
                    <td style="width:280px; vertical-align: top">
                        <table id="dgNotice" style="width: 500px;"
                            toolbar="#toolbarNotice" pagination="true" data-options="pageSize:20" 
                            rownumbers="true" fitcolumns="true" singleselect="true" autorowheight="true">
                            <thead >
                                <tr>
                                    <th field="NoticeTitle" data-options="formatter:DisplayTooltipF"  width="650px">Title</th>
                                    <th field="Edit_Date" width="400px">Last Edit Date</th>
                                    <th field="Operator" width="160px">Operator</th>
                                </tr>
                            </thead>
                        </table>
                        <div id="toolbarNotice">
                            <a href="javascript:void(0)" class="easyui-linkbutton" iconcls="icon-add" plain="true" onclick="newNotice()">New</a>
                            <a href="javascript:void(0)" class="easyui-linkbutton" iconcls="icon-edit" plain="true" onclick="editNotice()">Edit</a>
                            <a id="lnkDelete" href="javascript:void(0)" class="easyui-linkbutton" onclick="$('#dlgDelNotice').dialog('open')" plain="true" iconcls="icon-remove" title="Delete Notice">Delete</a>
                        </div>
                    </td>
                    <td style="width: 58%; vertical-align: top">
                        <div id="divShowContr" class="easyui-panel" title="Notice Description"  style="height: 370px;width:267px; padding: 5px;">
                        </div>
                    </td>
                </tr>
            </table>


            <div id="dlgNotice" class="easyui-dialog" style="width: 550px; height: 480px; padding: 10px 29px"
        closed="true" buttons="#dlg-buttons">
        <form id="fmNotice" method="post" novalidate>
           <div class="fitem">
                <label style="width: 130px;">Title:</label>
               <input id="txtNoticeTitle" runat="server" name="txtNoticeTitle"  type="text" style="width: 460px;" class="easyui-validatebox" />
           </div>
            
             <div class="fitem">
                <label style="width: 130px;">Content:</label>


              <div data-options="region:'center'" style="height: 65%" class="emailbox">
             <asp:TextBox ID="txtNoticeContent" runat="server" TextMode="MultiLine" Height="315px" Width="392px"></asp:TextBox>
             </div>

              <%--  <textarea id="txtNotice" name="txtNotice" style="width: 392px;height:160px;" class="easyui-validatebox" required="true"></textarea>--%>
            
                <input id="hdnNoticeID" value="" style="display: none" />
            </div>
        </form>
    </div>
    <div id="dlg-buttons">
        <a href="javascript:void(0)" class="easyui-linkbutton" iconcls="icon-cancel" onclick="javascript:$('#dlgNotice').dialog('close')" style="float: left">Cancel</a>
        <a href="javascript:void(0)" class="easyui-linkbutton" iconcls="icon-ok" onclick="saveNotice()">Save</a>
    </div>
    <div id="dlgDelNotice" class="easyui-dialog" title="Confirm" style="width: 300px; height: 160px" closed="true" resizable="false" modal="true">
        <h4 style="text-align: center">Are you sure want to delete this Notice?</h4>
        <div class="fitem" style="float: left; padding: 10px; margin-top: 10px">
            <a id="lnkDelNotice" href="javascript:void(0)" class="easyui-linkbutton" onclick="deleteNotice()" disabled="true">OK</a>
            <a id="lnkCancleNotice" href="javascript:void(0)" class="easyui-linkbutton" onclick="$('#dlgDelNotice').dialog('close')" disabled="true">Cancel</a>
            <span id="spnanimate">
                <img id="deleteProgress" style="margin-left: 20px" src="../../Media/loading.gif" />
                <label id="lbltimeOutn" style="margin-left: 20px">5</label>
            </span>
        </div>
    </div>
      
    </form>
</body>
     <script type="text/javascript">

         //Html editor
         tinyMCE.init({
             mode: "textareas",
             elements: "txtNoticeContent",
             theme: "advanced",
             relative_urls: true,
             remove_script_host: false,
             convert_urls: true,
             plugins: "autolink,lists,spellchecker,pagebreak,style,layer,table,save,advhr,advimage,advlink,emotions,iespell,inlinepopups,insertdatetime,preview,media,searchreplace,print,contextmenu,paste,directionality,fullscreen,noneditable,visualchars,nonbreaking,xhtmlxtras,template",
             theme_advanced_buttons1: "bold,italic,underline,strikethrough,|,justifyleft,justifycenter,justifyright,justifyfull,|,formatselect,fontselect,fontsizeselect",
             theme_advanced_buttons2: "bullist,numlist,|,outdent,indent,blockquote,|,undo,redo,|,link,unlink,anchor,image,help,code,|,forecolor,backcolor",
         });



         var currentDate = new Date()
         var day = currentDate.getDate()
         var month = currentDate.getMonth() + 1
         var year = currentDate.getFullYear()
         var CreateDateVal = year + "-" + month + "-" + day;

         var currentTime = new Date()
         var hours = currentTime.getHours()
         var minutes = currentTime.getMinutes()
         var seconds = currentTime.getSeconds();
         var CreateTime = hours + ':' + minutes + ':' + seconds;
         var EditDate = CreateDateVal + ' ' + CreateTime;
         var CreateDate = CreateDateVal + ' ' + CreateTime;;

         var Operator = '';

         $(document).ready(function () {

             Operator = document.getElementById('hdnUserName').value;

         });

         $(document).ready(function () {
             $('#dlgDelNotice').dialog({
                 onOpen: function () {
                     startCounter(5);

                 },
                 onClose: function () {
                     $('#lnkDelNotice').linkbutton('disable');
                     $('#lnkCancleNotice').linkbutton('disable');
                     $('#spnanimate').show();
                     $('#lbltimeOutn').html('');
                 }
             });
         });


         function startCounter(limit) {
             setTimeout(function () {
                 if (limit == 0) {
                     $('#lnkDelNotice').linkbutton('enable');
                     $('#lnkCancleNotice').linkbutton('enable');
                     $('#spnanimate').hide();

                 }
                 else {
                     $('#lbltimeOutn').html(limit);
                     startCounter(limit - 1);
                 }
             }, 1000);
         }


         var url;
         function newNotice() {
             $('#dlgNotice').dialog('open').dialog('setTitle', 'New Notice');
             $('#fmNotice').form('clear');
             tinymce.get('txtNoticeContent').setContent(decodeURIComponent(''));
             $('#txtNoticeTitle').val('');
             $('#hdnNoticeID').val('');
             url = '/WebServices/Notice/AddNotice';
         }
         window.onresize = function () {
             $('#dgNotice').datagrid('resize', {
                 width: window.innerWidth,
                 height: window.innerHeight
             });
         }
         function editNotice() {
             var row = $('#dgNotice').datagrid('getSelected');
             if (row) {
                 $('#dlgNotice').dialog('open').dialog('setTitle', 'Edit Notice');
                 $('#fmNotice').form('load', row);

                 tinymce.get('txtNoticeContent').setContent(decodeURIComponent(row.NoticeDescription));

                
                 $('#txtNoticeTitle').val(row.NoticeTitle);
                 $('#hdnNoticeID').val(row.NoticeID);
                 url = '/WebServices/Notice/AddNotice?NoticeID=' + row.NoticeID;
             }
         }
         function deleteNotice() {
             var row = $('#dgNotice').datagrid('getSelected');
             if (row) {
                 $.ajax({
                     url: '/WebServices/Notice.ashx',
                     type: 'POST',
                     data: {
                         method: 'DeleteNotice',
                         args: { NoticeID: row.NoticeID }

                     },
                     success: function (data) {
                         $('#dgNotice').datagrid('reload');
                         $('#dlgDelNotice').dialog('close');


                     }
                 });
             }
         }
         function saveNotice() {
             var strNotice = tinyMCE.get('txtNoticeContent').getContent({ format: 'raw' });
             var NoticeID = $('#hdnNoticeID').val();
             var NoticeTitle = $('#txtNoticeTitle').val();
             if (NoticeID != '') {
                 if (strNotice != '') {
                     $.ajax({
                         url: '/WebServices/Notice.ashx',
                         type: 'POST',
                         data: {
                             method: 'EditNotice',
                             args: { NoticeID: NoticeID, NoticeDescription: strNotice, EditDate: EditDate, NoticeTitle: NoticeTitle }
                         },
                         success: function (data) {
                             if (data == 1) {
                                 $('#dlgNotice').dialog('close');
                                 $('#dgNotice').datagrid('reload');
                             }
                             else {
                                 alert('Notice already exist');
                             }
                         }
                     });
                 }
             }
             else {
                 if (strNotice != '') {
                     $.ajax({
                         url: '/WebServices/Notice.ashx',
                         type: 'POST',
                         data: {
                             method: 'AddNotice',
                             args: { NoticeDescription: strNotice, CreateDate: CreateDate, EditDate: EditDate, Operator: Operator, NoticeTitle: NoticeTitle }
                         },
                         success: function (data) {
                             if (data == 1) {
                                 $('#dlgNotice').dialog('close');
                                 $('#dgNotice').datagrid('reload');
                             }
                             else {
                                 alert('Notice already exist.');
                             }
                         }
                     });
                 }
             }
         }

         $(document).ready(function () {
             $('#dgNotice').datagrid({
                 url: '/WebServices/Notice.ashx?method=Selectnotice',
                 onDblClickRow: function (index, rowdata)
                 {
                     editNotice();
                 },
                 onClickRow: function (index, rowdata)
                 {
                     
                     if (rowdata.NoticeDescription == null)
                         $('#divShowContr').html('');
                     else
                     {
                         var data = decodeURIComponent(rowdata.NoticeDescription);
                         $('#divShowContr').html(data);
                     }
                 },
              
                 
                
             });
         });

         

         function DisplayTooltipF(val, row)
         {
             
             return '<span style="width: 50%;Height:60%"  title="' + row.NoticeTitle + '" class="easyui-tooltip">' + row.NoticeTitle + '</span>';
         }


    </script>
    <input type="hidden" id="hdnUserName" runat="server" />

</html>
